// // const btn = document.getElementById('btn1')
// // btn.addEventListener('click',Event => {
// //   console.log('点击我了');
// // })

// 通用事件绑定函数
// function bindEvent(elem,type,fn) {
//   elem.addEventListener(type,fn)
// }

function bindEvent(elem, type, selector, fn) {
  if (fn == null ) {
    fn = selector
    selector = null
  }
  elem.addEventListener(type, Event => {
    const target = Event.target
    if (selector) {
      //代理绑定
      if (target.matches(selector)) {
        fn.call(target, Event)
      }
    }else {
      //普通绑定
      fn.call(target, Event) 
    }
  })
}


// const btn = document.getElementById('btn1')
//普通绑定
bindEvent(btn,'click',function (Event) {
  console.log(Event.target);//获取元素
  Event.preventDefault()//阻止默认行为
  Event.stopPropagation()//阻止事件冒泡
  alert('clicked')
})

// 事件代理，绑定到父元素上 例如 可用于 瀑布流
const div3 = document.getElementById('div3')
bindEvent(div3,'click',function (Event) {
  Event.preventDefault()
  const target = Event.target
  if (target.nodeName === 'A') {
    alert(target.innerHtml)
  }
})